<template>
  <div class="forum">
    <div class="forum_main" >
      <!--   论坛头部  -->
      <div class="header">
        <div style="text-align: center">
          <h1>论坛</h1>
        </div>
        <div style="text-align: right">
          <el-input
              v-model="search"
              clearable style="width: 130px;height: 26px; caret-color: auto;"
          />
          <el-button :icon="Search" circle />
        </div>
      </div>
      <!--   论坛身体  -->
      <div class="main">
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column  prop="name" label="文章" width="500" align="center">
            <template #default="{ row }">
              <router-link :to="{path:'/user/forum/detail' ,query: {id: row.id}}">{{row.name}}</router-link>
            </template>
          </el-table-column>
          <el-table-column prop="userName" label="作者" width="200" />
          <el-table-column prop="time" label="发表时间"  sortable/>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onBeforeMount } from 'vue'
import {Search} from '@element-plus/icons-vue'
import * as forumApi from '@/api/forum.js'


const search = ref('')
const tableData = ref([])

onBeforeMount(()=>{
  forumApi.select(1).then(resp=>{
    tableData.value =resp.data.data
  })
},

)






</script>

<style scoped>
.forum{
  caret-color: transparent;
  margin-right: 220px;
  margin-left: 220px;
}
.forum_main{
  height: 1000px;
  background-image: url("@/assets/img/user/forum.jpg");
  background-size: 100%;
  background-repeat: no-repeat;
  background-color: rgba(200, 200, 200, 1);
  background-blend-mode: overlay;
  caret-color: transparent;

}
.main{
  margin: 40px;
}
h1{
  font-family:STCaiyun;
  font-size:60px;
  margin: 0;
  color: rgba(101,81,255,0.44);
}

</style>
